<template>
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
        <li class="phone"><i class="glyphicon glyphicon-earphone"></i> Call us now：{{phone}}</li>
      </ul>
      <ul class="nav navbar-nav">
        <li class="linkman"><a href="/">大户家居用品</a></li>
        <li class="phone2 hidden-sm hidden-md hidden-lg"><a href="#">{{phone}}</a></li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  computed: {
    phone () {
      return this.$store.state.info.tele
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.navbar-nav{
  li{
    color: #fff;
    display: inline-block;
  }
}
.navbar-inverse .navbar-nav>li>a{
  display: inline-block;
  color: #fff;
}
.phone{
  line-height: 50px;
  height: 50px;
  color: #fff;
  display: inline-block;
}
.phone2{
  float: right;
  margin-right: 10px;
  color: #fff;
}
</style>
